<template>
  <div>
    <el-card class="box-card" style="margin-bottom: 30px;" >
      <!--标题区-->
      <div slot="header" class="clearfix">
        <span style="color: #1c84c6">已关联用户</span>
      </div>
      <el-form :model="relatedUsersForm" ref="relatedUsersForm" :inline="true">
        <el-form-item label="姓名" prop="userName">
          <el-input style="width: 150px;" v-model="relatedUsersForm.userName" placeholder="请输入姓名" clearable/>
        </el-form-item>
        <el-form-item label="部门" prop="deptId">
          <treeselect  style="width: 200px;" v-model="relatedUsersForm.deptId"
            :options="deptOptions" :normalizer="normalizer" placeholder="选择部门"
            />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="relatedUsersHandleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="relatedUsersResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <!--按钮区-->
      <el-row style="padding-bottom: 10px">
        <el-button type="danger" icon="el-icon-bottom" size="mini"
                   @click="unRelated" :disabled="relatedUsersMultiple">解绑</el-button>
      </el-row>
      <!--表格区-->
      <el-table :data="relatedUsersDataList" row-key="id"
                height="300" :reserve-selection="true" v-loading="relatedLoading"
                @selection-change="handleRelatedSel">
        <el-table-column type="selection" width="55" align="center" />
        <!-- <el-table-column label="用户编号" align="center" prop="id" /> -->
        <el-table-column label="姓名" align="center" prop="username"/>
        <el-table-column label="部门" align="center" prop="deptName"/>
        <el-table-column label="是否学习" align="center" prop="studyStatus">
          <template slot-scope="scope">
            <el-tag :type="scope.row.studyStatus  ? 'success' : 'info'">
              {{ scope.row.studyStatus ? '是' : '否' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否达标" align="center" prop="isPassed">
          <template slot-scope="scope">
            <el-tag :type="scope.row.isPassed  ? 'success' : 'info'">
              {{ scope.row.isPassed ? '是' : '否' }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column label="手机号码" align="center" prop="phone" width="120" /> -->
        <!-- <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" disabled
                       active-value="1" inactive-value="0"/>
          </template>
        </el-table-column> -->
      </el-table>

      <!-- <pagination v-show="relatedUsersTotal > 0" :total="relatedUsersTotal"
                  :page-sizes="[10, 20, 50, 100]" :page.sync="relatedUsersForm.pageNum"
                  :limit.sync="relatedUsersForm.pageSize" @pagination="getRelatedUserList"/> -->
    </el-card>

    <el-card class="box-card">
      <!--标题区-->
      <div slot="header" class="clearfix">
        <span style="color: peru">未关联用户</span>
      </div>
      <el-form :model="unrelatedUsersForm" ref="unrelatedUsersForm" :inline="true">
        <el-form-item label="姓名" prop="userName">
          <el-input style="width: 150px;" v-model="unrelatedUsersForm.userName" placeholder="请输入姓名" clearable/>
        </el-form-item>
        <el-form-item label="部门" prop="deptId">
          <treeselect style="width: 200px" v-model="unrelatedUsersForm.deptId"
            :options="deptOptions" :normalizer="normalizer" placeholder="选择部门"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="unrelatedUsersHandleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="unrelatedUsersResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <!--按钮区-->
      <el-row style="padding-bottom: 10px">
        <el-button type="success" icon="el-icon-top" size="mini"
                   @click="related" :disabled="unrelatedUsersMultiple">关联</el-button>
      </el-row>
      <!--表格区-->
      <el-table :data="unrelatedUsersDataList" row-key="id"
                height="300" :reserve-selection="true" v-loading="unRelatedLoading"
                @selection-change="handleUnRelatedSel">
        <el-table-column type="selection" width="55" align="center" />
        <!-- <el-table-column label="用户编号" align="center" prop="id" /> -->
        <el-table-column label="姓名" align="center" prop="username"/>
        <el-table-column label="部门" align="center" prop="deptName"/>
        <!-- <el-table-column label="手机号码" align="center" prop="phone" width="120" /> -->
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" disabled
                       active-value="1" inactive-value="0"/>
          </template>
        </el-table-column>
      </el-table>

      <!-- <pagination v-show="unrelatedUsersTotal > 0" :total="unrelatedUsersTotal"
                  :page-sizes="[5, 10, 20, 500]" :page.sync="unrelatedUsersForm.pageNum"
                  :limit.sync="unrelatedUsersForm.pageSize" @pagination="getUnRelatedUserList"/> -->
    </el-card>
  </div>
</template>


<script>
import {
  getRelatedUserList,
  getUnRelatedUserList,
  relatedUsers,
  unRelatedUsers
} from '@/api/regulatory/studySkills'
import { listDept} from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name : 'relatedUser',
  components: { Treeselect },
  props: ["batchId"],
  created() {
    //获取部门下拉列表
    listDept().then(response => {
      this.deptOptions = this.handleTree(response.data, "id");
    });
    //获取已关联用户
    this.getRelatedUserList()
    //获取未关联用户
    this.getUnRelatedUserList();
  },
  data() {
    return {
      relatedUsersMultiple : true,//关联用户多选禁用
      relatedUsersForm : { //关联用户查询参数
        // pageNum: 1,
        // pageSize: 5,
        userName : undefined,
        batchId: this.batchId,
        deptId : undefined
      },
      relatedUsersDataList:[],//关联用户数据列表
      relatedUsersTotal: 0, //关联用户总条数
      relatedSelIds : [], //关联用户选中列
      relatedLoading : true , //关联用户加载图标

      unrelatedUsersMultiple : true,//未关联用户多选禁用
      unrelatedUsersForm : { //未关联用户查询参数
        // pageNum: 1,
        // pageSize: 5,
        userName : undefined,
        batchId: this.batchId,
        deptId : undefined
      },
      unrelatedUsersDataList:[],//未关联用户数据列表
      unrelatedUsersTotal: 0, //未关联用户总条数
      unrelatedSelIds : [], //未关联用户选中列
      unRelatedLoading : true, //未关联用户加载图标

      //部门下拉列表
      deptOptions: undefined,
    }
  },
  methods : {
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      };
    },
    /** 查询技能批次关联用户 */
    getRelatedUserList() {
      this.relatedLoading = true;
      getRelatedUserList(this.relatedUsersForm).then(res=> {
        this.relatedLoading = false;
        this.relatedUsersDataList = res.data;
        //this.relatedUsersTotal = res.data.total;
      })
    },
    /** 关联列表-搜索*/
    relatedUsersHandleQuery() {
      //this.relatedUsersForm.pageNum = 1;
      this.getRelatedUserList();
    },
    /** 关联列表-重置*/
    relatedUsersResetQuery() {
      this.$refs["relatedUsersForm"].resetFields();
      this.relatedUsersHandleQuery();
    },
    /** 查询技能批次未关联用户 */
    getUnRelatedUserList() {
      this.unRelatedLoading = true;
      getUnRelatedUserList(this.unrelatedUsersForm).then(res=> {
        this.unRelatedLoading = false;
        this.unrelatedUsersDataList = res.data;
        //this.unrelatedUsersTotal = res.data.total;
      })
    },
    /** 未关联列表-搜索*/
    unrelatedUsersHandleQuery() {
      //this.unrelatedUsersForm.pageNum = 1;
      this.getUnRelatedUserList();
    },
    /** 未关联列表-重置*/
    unrelatedUsersResetQuery() {
      this.$refs["unrelatedUsersForm"].resetFields();
      this.unrelatedUsersHandleQuery();
    },
    /** 关联列表-多选*/
    handleRelatedSel(selection) {
      this.relatedSelIds = selection.map(item => Number(item.id))
      this.relatedUsersMultiple = !selection.length;
    },
    /** 未关联列表-多选*/
    handleUnRelatedSel(selection) {
      this.unrelatedSelIds = selection.map(item => Number(item.id))
      this.unrelatedUsersMultiple = !selection.length;
    },
    /** 关联用户 */
    related() {
      relatedUsers(this.batchId,this.unrelatedSelIds).then(()=> {
        this.msgSuccess("关联成功");
        this.$emit('relatedUserSuccess');
        this.getRelatedUserList();
        this.getUnRelatedUserList();
      })
    },
    /** 解绑用户 */
    unRelated() {
      unRelatedUsers(this.batchId,this.relatedSelIds).then(()=> {
        this.msgSuccess("解绑成功");
        this.$emit('relatedUserSuccess');
        this.getRelatedUserList();
        this.getUnRelatedUserList();
      })
    },

  }
}
</script>



<style scoped>
</style>
